<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            margin: 0px auto;
            position: relative;
        }
        .box > div{
            width: 200px;
            height: 200px;
            border: 1px solid rgb(211, 42, 220);
            box-sizing: border-box;
            background-image: url("pic.jpg");
            position: absolute;
            background-size: 600px 600px;
        }
        .start{
            text-align: center;
            padding: 30px 0;
        }
    </style>
</head>
<body>
    <div class="start"><button>开始</button></div>
    
    <div class="box">
    </div>
    <script>
        var arr = [{
            x:0,
            y:0,
            left:0,
            top:0
        },{
            x:-200,
            y:0,
            left:200,
            top:0
        },{
            x:-400,
            y:0,
            left:400,
            top:0
        },{
            x:0,
            y:-200,
            left:0,
            top:200
        },{
            x:-200,
            y:-200,
            left:200,
            top:200
        },{
            x:-400,
            y:-200,
            left:400,
            top:200
        },{
            x:0,
            y:-400,
            left:0,
            top:400
        },{
            x:-200,
            y:-400,
            left:200,
            top:400
        },{
            x:-400,
            y:-400,
            left:400,
            top:400
            }];
       
        var box = document.querySelector(".box");
        var but = document.querySelector(`.start > button`);
        random(9);
        var divs = document.querySelectorAll(".box > div");
        for (let i = 0; i <divs.length; i++) {
            divs[i].draggable = true;
            let l = [];
            let t = 0;
            let l1 = 0;
            let t1 = 0;
            divs[i].ondragstart = function (e) {
                l = e.target.style.left;
                t = e.target.style.top;
                console.log(l);
                console.log(t);
              
            }
            divs[i].ondragover = function (e) {
                e.preventDefault();
            }
            divs[i].ondrop = function (e) {
                e.preventDefault();
                e.stopPropagation();
                l1 = e.target.style.left;
                t1 = e.target.style.top;
               
            }
        }

        let cont = 0;
        but.onclick = function () {
            cont++;
            if (cont % 2 == 0) {
                but.innerHTML = `开始`;
                for (var i = 0; i < arr.length; i++) {
                    var div = document.createElement("div");
                    div.style.backgroundPositionX = arr[i].x + "px";
                    div.style.backgroundPositionY = arr[i].y + "px";
                    div.style.left = arr[i].left + "px";
                    div.style.top = arr[i].top + "px";
                    box.appendChild(div);
                }
                return;
            }
            random(9);
            but.innerHTML = `恢复`;
        }
       
       
        // 点击开始打乱次序 获取随机数 改变图片背景位置 给图片加上id 
        function getRandomIntInclusive(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1) + min);
        }
       function random(num1) {
            let num = [];
            let num2 = [];
            let m = 0;
           for (var i = 0; i < num1; ++i) {
                let flag = false;
                num[i] = getRandomIntInclusive(0, 8);
                 for (var k = 0; k <= num2.length; k++) {
                    if (num2[k] == num[i]) {
                        flag = true;
                        i = i - 1;
                        break;
                    }
                }
                if (!flag) {
                    num2[m++] = num[i]

                }

           }
           for (var i = 0; i < arr.length; i++) {

               var div = document.createElement("div");
               div.style.backgroundPositionX = arr[i].x + "px";
               div.style.backgroundPositionY = arr[i].y + "px";
               div.style.left = arr[num2[i]].left + "px";
               div.style.top = arr[num2[i]].top + "px";
               div.id = `${i}`;
               box.appendChild(div);
           }
        }
        
    </script>
</body>
</html>